<template>
 <div class="header">
  <el-carousel :interval="3000" arrow="always" height="900px">
    <el-carousel-item v-for="item in 2" :key="item" >
      <div class="container">
        <div class="nav clearfix">
          <div class="nav-logo">
            <img src="../assets/images/logo.png" alt="">
          </div>
            <div class="nav-list clearfix">
              <ul>
                <li><a class="current" href="/">首页</a></li>
                <li><a href="#/protect">我们提供什么</a></li>
                <li><a href="#/advantage">我们的优势</a></li>
                <li><a href="#/farmshow">农场展示</a></li>
                <li><a href="#/contact">联系我们</a></li>
              </ul>
                <a href="#/" class="login"><Icon type="person"></Icon></a>
            </div>
        </div>
        <div class="label">
            <h1>健康食品爱好者的天然产品</h1>
            <p>我们种植最好的有机和食物</p>
          <div class="button">
            <a href="">more</a>
          </div>
        </div>
      </div>
    </el-carousel-item>
  </el-carousel>
 </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>

.el-carousel__item:nth-child(2n) {
     background-image:url(../assets/images/background2.jpg);
     background-size:100% 100%;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-image:url(../assets/images/background.jpg);
     background-size:100% 100%;
  }

 a{text-decoration:none;color: rgb(255, 255, 255);}
  .container{
    width:80%;
    margin: 0 auto;
  }
  .nav{
    height:110px;
    display:flex;
    justify-content:space-around;
  }
  .nav-logo{
    height:56px;
    vertical-align: middle;
    margin-top:15px;
  }
  .nav-logo img{
    width:180px;
    height:40px;
    padding-left:50px;
  }
  .nav-list{
    height:56px;
    margin-top:15px;
    white-space: nowrap;
  }
  .nav-list ul li{
    list-style:none;
    float:left;
    font-size:14px;
  }
  .nav-list ul li a{
    padding:23px;
    transition:all 0.5s;
  }
  .nav-list ul li a:hover{
    background-color:#48A864;
  }
  .current{
    background-color:#48A864;
  }

  .label{
    margin:0 auto;
    margin-top:20%;
    padding-bottom:30%;
    color:white;
  }
  .label h1 {
    font-weight:normal;
    font-size:50px;
  }
  .label p {
    font-size:18px;
  }
  .label .button{
    margin-top:100px;
  }
  .label .button a {
    font-size: 14px;
    border-radius:100px;
    padding:15px 30px;
    background-color:#13AE47;
    
  }
  .label .button a:hover{
    background-color:#26aa42;
  }

  .login{
    margin-left:150px;
    border-radius: 3px;
    font-size: 14px;
    background: #48a864;
    padding:10px 15px;
  }






  clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
  }
  .clearfix {
    zoom: 1;
  }
</style>
